CSS @function: Kohandatud funktsioonide defineerimine dünaamilise stiilimise jaoks

CSS, veebi stiilimise keel, areneb pidevalt. Kuigi CSS-i muutujad (kohandatud omadused) on dünaamilises stiilimises toonud kaasa märkimisväärse hüppe, viib @function reegel selle sammu võrra kaugemale. See võimaldab arendajatel defineerida kohandatud funktsioone otse CSS-is, võimaldades keerukamaid arvutusi ja väärtuste manipuleerimist keerukamate ja korduvkasutatavate kujunduste jaoks. See blogipostitus uurib @function'i võimsust, selle süntaksit, kasutusjuhtumeid ja seda, kuidas see võib teie CSS-i töövoogu revolutsiooniliselt muuta.

CSS @function'i mõistmine

@function reegel on CSS-i funktsioon, mis võimaldab teil defineerida kohandatud funktsioone, sarnaselt funktsioonidele programmeerimiskeeltes nagu JavaScript või Python. Need funktsioonid aktsepteerivad argumente, teostavad nende argumentide põhjal arvutusi või manipulatsioone ja tagastavad väärtuse, mida saab kasutada CSS-i omaduse väärtusena.

Enne @function'it saavutati sarnaseid tulemusi sageli eelprotsessorite, nagu Sass või Less, abil. Kuigi need eelprotsessorid on endiselt võimsad tööriistad, toob natiivne @function reegel selle funktsionaalsuse otse CSS-i, vähendades sõltuvusi ja potentsiaalselt lihtsustades teie töövoogu.

@function süntaks

@function'i põhisüntaks on järgmine:

            @function funktsiooni-nimi(argument1, argument2, ...) {
  // Funktsiooni keha: arvutused, manipulatsioonid jne.
  @return väärtus;
}
            

              
                Copy
              
            
          

• @function: Märksõna, mis deklareerib kohandatud funktsiooni definitsiooni alguse.
• funktsiooni-nimi: Nimi, mille oma funktsioonile valite. See nimi peab järgima standardseid CSS-i identifikaatori reegleid (algama tähe või allkriipsuga, millele järgnevad tähed, numbrid, allkriipsud või sidekriipsud).
• (argument1, argument2, ...): Funktsiooni aktsepteeritavate argumentide loend. Need on nimega väärtused, mis antakse funktsioonile selle väljakutsumisel. Teil võib olla null või rohkem argumenti.
• { ... }: Funktsiooni keha, mis sisaldab sooritatavat loogikat ja arvutusi.
• @return väärtus: @return reegel määrab väärtuse, mille funktsioon tagastab. See väärtus võib olla lihtne number, värv, string või mis tahes kehtiv CSS-i väärtus.

CSS @function praktilised näited

Uurime mõningaid praktilisi näiteid, et illustreerida @function'i võimsust.

Näide 1: Fondi suuruse arvutamine kordaja alusel

Kujutage ette, et soovite hõlpsasti kohandada erinevate elementide fondi suurust baasfondi suuruse ja kordaja alusel. Saate defineerida sellise funktsiooni:

            @function calculate-font-size($base, $multiplier) {
  @return calc($base * $multiplier);
}

body {
  font-size: 16px;
}

h1 {
  font-size: calculate-font-size(16px, 2);
}

p {
  font-size: calculate-font-size(16px, 1.2);
}
            

              
                Copy
              
            
          

Selles näites:

• calculate-font-size võtab kaks argumenti: $base (baasfondi suurus) ja $multiplier (kordaja).
• See kasutab calc() funktsiooni baasfondi suuruse korrutamiseks kordajaga.
• @return reegel tagastab arvutatud fondi suuruse.
• h1 elemendi fondi suurus on 32px (16px * 2).
• p elemendi fondi suurus on 19.2px (16px * 1.2).

Näide 2: Värvide genereerimine heleduse reguleerimisega

Saate kasutada @function'it, et genereerida värvivariatsioone baasvärvi põhjal. See on eriti kasulik värviskeemide loomisel, millel on ühtsed toonid ja varieeruv heledus.

            @function adjust-luminance($color, $amount) {
  @return color-mix(in srgb, $color, black $amount%);
}

:root {
  --primary-color: #3498db;
}

.button {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

.button:hover {
  background-color: adjust-luminance(var(--primary-color), 20);
}

.button:active {
  background-color: adjust-luminance(var(--primary-color), 40);
}
            

              
                Copy
              
            
          

Selles näites:

• adjust-luminance võtab kaks argumenti: $color (baasvärv) ja $amount (segatava musta värvi protsent).
• See kasutab color-mix() funktsiooni baasvärvi segamiseks mustaga, reguleerides heledust.
• @return reegel tagastab kohandatud värvi.
• Nupu :hover olekus on põhivärvist tumedam toon (segatud 20% mustaga).
• :active olekus on veelgi tumedam toon (segatud 40% mustaga).

Näide 3: Võrgustiku veergude laiuste arvutamine

Responsiivsete võrgustike loomine hõlmab sageli keerukaid arvutusi. @function võib seda protsessi lihtsustada.

            @function calculate-grid-column-width($total-columns, $column-span) {
  @return calc(($column-span / $total-columns) * 100%);
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 10px;
}

.grid-item {
  &.col-1 {
    grid-column: span 1;
    width: calculate-grid-column-width(12, 1);
  }

  &.col-2 {
    grid-column: span 2;
    width: calculate-grid-column-width(12, 2);
  }

  &.col-3 {
    grid-column: span 3;
    width: calculate-grid-column-width(12, 3);
  }
  // ... ja nii edasi, kuni .col-12
}
            

              
                Copy
              
            
          

Selles näites:

• calculate-grid-column-width võtab kaks argumenti: $total-columns (veergude koguarv võrgustikus) ja $column-span (mitu veergu võrgustiku element peaks hõlmama).
• See arvutab võrgustiku elemendi laiuse protsentides veeru ulatuse ja veergude koguarvu alusel.
• @return reegel tagastab arvutatud laiuse.
• .col-1 klassi laius on 1/12 võrgustiku konteineri laiusest.
• .col-2 klassi laius on 2/12 võrgustiku konteineri laiusest ja nii edasi.

CSS @function kasutamise eelised

@function'i kasutamine pakub mitmeid eeliseid:

• Korduvkasutatavus: Defineerige funktsioonid üks kord ja kasutage neid uuesti kogu oma CSS-is, edendades järjepidevust ja vähendades koodi dubleerimist.
• Hooldatavus: Arvutuste või loogika muudatusi tuleb teha ainult ühes kohas (funktsiooni definitsioonis), mis lihtsustab hooldust.
• Dünaamiline stiilimine: Looge stiile, mis kohanduvad muutujate või muude sisendväärtuste alusel, võimaldades paindlikumaid ja responsiivsemaid kujundusi.
• Loetavus: Funktsioonid võivad muuta teie CSS-koodi loetavamaks ja arusaadavamaks, kapseldades keerukaid arvutusi.
• Vähendatud sõltuvus eelprotsessoritest (potentsiaalselt): Kuigi eelprotsessorid pakuvad laiemat funktsioonide valikut, välistab @function vajaduse nende järele paljudel juhtudel, lihtsustades teie projekti seadistamist.

Kaalutlused ja piirangud

Kuigi @function on võimas tööriist, on oluline olla teadlik selle piirangutest:

• Veebilehitsejate tugi: Veebilehitsejate tugi @function'ile on kaasaegsetes brauserites üldiselt hea. Siiski on alati hea tava kontrollida ühilduvust saidil Can I Use ([https://caniuse.com/](https://caniuse.com/)) enne selle kasutamist tootmises. Vanemate brauserite jaoks võib olla vaja pakkuda varustiile.
• Keerukus: Funktsioonide liigne kasutamine või liiga keerukate funktsioonide loomine võib muuta teie CSS-i raskemini mõistetavaks ja silutavaks. Püüdke lihtsuse ja selguse poole.
• Jõudlus: Kuigi üldiselt on see jõudluslik, võivad funktsiooni sees olevad äärmiselt keerukad arvutused mõjutada renderdamise jõudlust. Testige ja optimeerige vastavalt vajadusele.
• Kõrvalmõjude puudumine: CSS-i funktsioonid peaksid olema puhtad funktsioonid, mis tähendab, et nad peaksid sõltuma ainult oma sisendargumentidest ega tohiks omada kõrvalmõjusid (nt globaalsete muutujate muutmine).

Võrdlus CSS-i muutujatega (kohandatud omadused)

CSS-i muutujad ja @function töötavad hästi koos. CSS-i muutujad salvestavad väärtusi, samas kui @function manipuleerib neid väärtusi. Saate kasutada CSS-i muutujaid oma funktsioonide argumentidena, luues väga dünaamilisi ja konfigureeritavaid stiile.

Mõelge CSS-i muutujatest kui *andmetest* ja @function'ist kui nende andmete *töötlejast*.

CSS @property ja @function: Sünergiline duo

@property at-reegel koos @function'iga pakub veelgi rohkem kontrolli ja paindlikkust. @property võimaldab teil selgesõnaliselt määratleda kohandatud omaduste tüübi, süntaksi ja algväärtuse, muutes need animeeritavaks ja üleminekutega kasutatavaks. Koos @function'iga saate luua kohandatud omadusi, mida arvutatakse ja uuendatakse dünaamiliselt keeruka loogika alusel.

Näiteks saate määratleda kohandatud omaduse, mis esindab gradiendi nurka, ja seejärel kasutada @function'it selle nurga arvutamiseks kasutaja interaktsiooni või muude tegurite põhjal. See võimaldab luua väga interaktiivseid ja dünaamilisi visuaalseid efekte.

CSS @function kasutamise parimad praktikad

Et @function'ist maksimumi võtta, järgige neid parimaid praktikaid:

• Hoidke funktsioonid lihtsad: Keskenduge väikeste, hästi defineeritud funktsioonide loomisele, mis täidavad ühte ülesannet.
• Kasutage kirjeldavaid nimesid: Valige funktsioonidele nimed, mis viitavad selgelt nende eesmärgile.
• Dokumenteerige oma funktsioonid: Lisage kommentaare, et selgitada, mida iga funktsioon teeb ja kuidas seda kasutada. See on eriti oluline meeskondlikes projektides.
• Testige põhjalikult: Veenduge, et teie funktsioonid töötavad ootuspäraselt erinevates brauserites ja seadmetes.
• Vältige sügavat pesastamist: Funktsioonide liigne pesastamine võib põhjustada jõudlusprobleeme ja muuta koodi silumise raskemaks.
• Arvestage ligipääsetavusega: Veenduge, et teie funktsioonide tehtud muudatused säilitavad ligipääsetavuse kõigile kasutajatele. Näiteks värvide kohandamisel kontrollige piisavat kontrasti.
• Internatsionaliseerimise (i18n) kaalutlused: Kui teie rakendus toetab mitut keelt, olge teadlik, kuidas teie funktsioonid käsitlevad ühikuid ja väärtusi, mis võivad olla keelespetsiifilised. Näiteks võivad erinevad lokaadid kasutada erinevaid komakohti või numbrivorminguid.

Globaalne rakendus ja näited

@function reeglit saab rakendada erinevates globaalsetes stsenaariumides. Siin on mõned näited:

• Dünaamiline teemahaldus: Rakendustes, mis toetavad mitut teemat (nt hele ja tume režiim või brändispetsiifilised värviskeemid), saab @function'it kasutada teemaspetsiifiliste värvivariatsioonide arvutamiseks baasvärvi alusel. See tagab järjepidevuse kogu rakenduses, võimaldades samal ajal kohandamist. Näiteks võiks funktsioon kohandada baasvärvi tooni ja küllastust vastavalt valitud teemale.
• Responsiivne tüpograafia: Erinevad keeled võivad optimaalse loetavuse tagamiseks vajada erinevaid fondi suurusi ja reavahesid. Funktsioon saab arvutada sobiva fondi suuruse vastavalt tuvastatud kasutaja keelele või piirkonnale. See tagab, et tekst on loetav ja visuaalselt meeldiv, olenemata kasutaja lokaadist. Näiteks hiina tähemärgid saavad sageli kasu veidi suurematest fondi suurustest kui ladina tähemärgid.
• Lokaliseeritud numbrite vormindamine: Teatavad CSS-i omadused, nagu width või margin, võivad sõltuvalt piirkonnast vajada lokaliseeritud vormindamist. Funktsioon saab need omadused vormindada vastavalt kasutaja lokaadile. See võib hõlmata ühikute teisendamist või erinevate eraldajate kasutamist. Näiteks mõnes riigis kasutatakse komakohtade eraldajana koma, teistes aga punkti.
• Paremalt-vasakule (RTL) paigutused: RTL-keeltes, nagu araabia või heebrea keel, tuleb teatud CSS-i omadusi peegeldada või ümber pöörata. Funktsioon saab neid omadusi automaatselt kohandada vastavalt tuvastatud teksti suunale. See tagab, et paigutus kuvatakse RTL-keeltes korrektselt. Näiteks võib olla vaja teisendada margin-left väärtuseks margin-right.

Kokkuvõte

CSS @function on võimas funktsioon, mis võimaldab teil defineerida kohandatud funktsioone dünaamiliseks stiilimiseks. Mõistes selle süntaksit, eeliseid ja piiranguid, saate seda kasutada korduvkasutatavama, hooldatavama ja keerukama CSS-koodi loomiseks. Võtke @function omaks, et avada oma veebiarendusprojektides uus kontrolli ja loovuse tase.

Katsetage erinevate kasutusjuhtumitega ja uurige, kuidas @function saab teie CSS-i töövoogu täiustada. Kuna brauserite tugi pidevalt paraneb, saab sellest kahtlemata kaasaegsete veebiarendajate oluline tööriist. Tõeliselt globaalse kasutajakogemuse tagamiseks ärge unustage oma implementatsioonides arvestada ligipääsetavuse ja internatsionaliseerimisega.